<template>
	<div id="app">
		<!-- Header 导航栏 -->
		<header id="header" class="alt">
		 <div class="logo">InkCloud<span style="font-family: '微软雅黑';">墨云社区</span> </div>
		 
		</header>
		<!-- Banner 中央标题 -->
			<div id="banner">
				<div>
					<el-input  id="search" placeholder="输入要搜索的文章" v-model="enter"></el-input>
					<el-button type="success" id="searchbutton">搜索</el-button>
					</div>
			</div>
			<el-divider></el-divider>
		
		<!-- 顶部之下 -->
		
		
		<el-container>
		  <el-aside width="25%">
			  
			  </el-calendar>
			  
		  </el-aside>
		  <el-main >
			  
			  <Detail v-bind:title="title" v-bind:author="author" v-bind:text="text"></Detail>
			<el-divider></el-divider>
			<!-- 评论 -->
			
			
			
			<el-row>
				<el-col :span="20">
					<span style="font-family: 'PingFang SC'; font-size: x-large;color: #3498DB;" >
						<i class="el-icon-s-unfold"></i>评论区	
					</span>
				</el-col>
			  <el-col :span="4">
				  <el-button type="primary" round  @click="dialog=true">发表评论</el-button>
			  </el-col>
			</el-row>
			
			<el-divider></el-divider>
			
			<div v-loading="commentLoading">
			<comment v-for="theComment in articleComments" v-bind:articleComment="theComment"></comment>
			</div>
		  </el-main>
		  <el-aside width="25%"></el-aside>
		</el-container>
		
		<!-- 发表评论面板 -->
		
		<el-dialog
		  title="发表你的看法吧"
		  :visible.sync="dialog"
		  width="30%"
		  >
		  <el-input
		    placeholder="请输入内容"
		    v-model="submitComment"
		    clearable 
			maxlength="30"
			show-word-limit
			>
		  </el-input>
		  
		  
		    <el-button @click="dialog = false ">取 消</el-button>
		    <el-button type="primary" @click="publishComment">确 定</el-button>
		  </span>
		</el-dialog>
		
		
		
		
		
	</div>
</template>

<script>
	import  Detail from '../components/Detail.vue'
	import  comment from "../components/Comment.vue"
	import axios from 'axios'
	
	 export default{
		name:'Article',
		components:{
			Detail,
			comment
		},
		data:function(){
			return{
					title:'',
					author:'',
					text:'',
					articleComments:[],
					commentLoading:true,
					dialog:false,
					submitComment:""
				
				
			}
		},
		
	  mounted(){
		  // alert(this.$route.params.articleId)
		  var articleId = this.$route.query.articleId
		  var server = this.$myConfig.server
		  var loginAddr = this.$myConfig.loginAddr
		  var that = this;
		  axios({url: server+'/community/articleDetail',withCredentials: true, params:{articleId:articleId}})
		          .then(function (response) {
					  
		              var result = response.data
					  if (result.status==-1){
						  that.$message.error("您还没有登陆呢")
					  }else if(result.status==0){
						  that.$message.warning("服务器开小差或者传输数据有误")
					  }else{
							that.$message.success("获取数据成功,加载中")
						  that.loadTheArticle(result.data,that)
					  }
		          })
		          .catch(function (error) {
		              console.log(error);
		          });
		
	
		  
	  },
	  methods:{
			loadTheArticle:function(data,that){
				
				that.title= data.title
				that.author=data.author
				that.text=data.text
				that.articleComments=data.comment
				that.commentLoading=false
			},
			publishComment:function(){
				var status = this.prePublish()
				if(status==0){
					this.$message.error("评论不可以为空哦")
					return
				}
				var articleId = this.$route.query.articleId
				var userComment = this.submitComment
				var that = this
				var server = this.$myConfig.server
				var loginAddr = this.$myConfig.loginAddr
				
				axios({url: server + '/community/publishComment',withCredentials: true,method:'post',data:{articleId:articleId,userComment:userComment}})
				        .then(function (response) {
				            
							var result = response.data
							if(result.status==-1){
								that.$message.error("您还没有登陆哦")
								
								that.timer = setTimeout(()=>{   //设置延迟执行
								     window.location.href = loginAddr ;           
								            },2000);
								
							}else if(result.status==0){
								that.$message.warning("服务器内部错误或者信息传输有误")
							}else{
								that.$message.success("发表成功")
								that.dialog=false
								that.flashTheComment()
								that.submitComment=''
							}
				        })
				        .catch(function (error) {
				            
				        });
				
			},
			flashTheComment:function(){
				this.commentLoading=true
				var articleId = this.$route.query.articleId
				var server = this.$myConfig.server
				var that = this;
				axios({url: server+'/community/articleDetail',withCredentials: true, params:{articleId:articleId}})
				        .then(function (response) {
									  
				            var result = response.data
									  if (result.status==-1){
										  that.$message.error("您还没有登陆呢")
									  }else if(result.status==0){
										  that.$message.warning("服务器开小差或者传输数据有误")
									  }else{

										  that.articleComments= result.data.comment
										  that.commentLoading=false
									  }
				        })
				        .catch(function (error) {
				            console.log(error);
				        });
				
				
			},
			
			prePublish:function(){
				if(this.submitComment==''){
					return 0
				}
				
			}
		  
		  
		  
	  }
		
		
	}
	
</script>





<style>
	
	html,body,#app {
		  margin: 0;
		  padding: 0;
		  font-family: "Raleway", Arial, Helvetica, sans-serif;
		}
	/* Header 导航栏*/
	#header {
		font-size: 1.25em;
		background: rgba(0, 0, 0, 0.75);
		color: #aed6f1;
		height: 3.25em;
		left: 0;
		line-height: 3.25em;
		position: fixed;
		text-align: right;
		top: 0;
		width: 100%;
		cursor:default;
		z-index: 10001;
	}
	
	#header > .logo {
		display: inline-block;
		height: inherit;
		left: 1em;
		line-height: inherit;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
	}
	
	#header > .logo span {
		font-weight: 300;
		font-size: .8em;
		color: #FFF;
	}
	
	#header > a {
		transition: color 0.2s ease-in-out;
		display: inline-block;
		padding: 0 1.25em;
		text-decoration: none;
		color: #FFF;
	}
	
	#header > a:hover {
		color: #3498db;
	}
	
	/* 背景透明,位置调整 */
	#header.alt {
		animation: none;
		background-color: transparent;
		box-shadow: none;
		overflow: hidden;
		position: absolute;
		top: 1em;
	}
	
	/* Banner 背景*/
	#banner {
		padding: 5em 0 5em 0;
		background-size: cover;
		background-position: top;
		background-attachment: fixed;
		background-repeat: no-repeat;
		
		background-image: url(../assets/img/banner.jpg);
		
	}
	
	
	
</style>
